<!--
@description ：微名片
-->

<template>
  <div class="app-container" v-loading="loading">
    <div class="wrap g-card">
      <div class="card-header">
        <div class="title">微名片</div>
        <el-button size="small" type="primary" @click="setConfig">名片设置</el-button>
      </div>
      <div class="content">
        <div class="callingCard">
          <div class="show">
            <div class="info" v-if="info && info.userId">
              <div class="info-list-item info-header">
                <i class="el-icon-close"></i>
                <span style="display: inline-block">名片</span>
                <i class="el-icon-more"></i>
              </div>
              <div class="info-top info-list-item">
                <div class="info-avatar">
                  <div v-if="!info.avatar" class="avatar">{{ info.name ? info.name.slice(-1) : '' }}</div>
                  <div v-if="info.avatar" class="avatar">
                    <img :src="info.avatar" alt="" style="width: 100%;height: 100%">
                  </div>
                  <div class="standing">
                    <div class="nameAndPosition">
                      <span class="name" v-if="info.name">{{ info.name }}</span>
                      <span class="positionInfo" v-if="info.position">{{ info.position }}</span>
                    </div>
                    <div class="corporation" v-if="info.corporation">{{ `@${info.corporation}` }}</div>
                  </div>
                </div>
                <div class="mobile info-list-item" v-if="info.mobile">电话:&emsp;{{ info.mobile }}</div>
                <div class="address info-list-item" v-if="info.address">地址:&emsp;{{ info.address }}</div>
              </div>
              <div class="info-list-item info-btn">
                <div class="info-btn-item">
                  <i class="el-icon-mobile"></i>&emsp;打电话
                </div>
                <div class="info-btn-item" style="border-left: 1px dashed #ccc">
                  <div class="info-btn-item">
                    <i class="el-icon-user-solid"></i>&emsp;加微信
                  </div>
                </div>
              </div>
              <div class="person">
                <div class="person-title">个人介绍</div>
                <div class="introduce" v-if="info.introduce">{{ info.introduce }}</div>
                <div v-if="info.label" class="label">
                  <el-tag
                    v-for="(tag,index) in info.label"
                    :key="index"
                    v-show="tag"
                    :disable-transitions="false"
                  >
                    {{ tag }}
                  </el-tag>
                </div>
              </div>
            </div>
          </div>
          <div class="card">
            <div class="card-time">
              <div class="card-time-select">访问时间:
                <el-date-picker
                  v-model="selectTime"
                  end-placeholder="结束日期"
                  range-separator="至"
                  start-placeholder="开始日期"
                  style="width: 230px"
                  type="daterange"
                  value-format="yyyy-MM-dd"
                  @change="handleQuery"
                  :clearable="false"
                >
                </el-date-picker>
              </div>
              <div class="card-time-result">
                访问人次: <span class="result-num">{{ `${visitPeople}/${visitNum}` }}</span><i class="el-icon-arrow-right" style="font-size: 18px;cursor: pointer" @click="toDetail"></i>
              </div>
            </div>
            <div class="card-share">
              <el-tabs v-model="activeName" type="card" @tab-click="handleTabClick">
                <el-tab-pane label="分享h5" name="first">
                  <div class="shareToH5">
                    <div id="qrcode" ref="qrcode"></div>
                    <div class="shareInfo">微信扫码后，点击右上角分享</div>
                    <div class="shareBtn">
                      <span @click="downloadQrCode" style="cursor: pointer">下载二维码</span>
                      <span @click="copyLink" style="cursor: pointer">复制分享链接</span>
                    </div>
                  </div>
                </el-tab-pane>
              </el-tabs>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import QRCode from 'qrcodejs2'
import html2canvas from 'html2canvas'
import * as api from '@/api/callingCard'
import { getWeUserId } from '@/utils/auth'
export default {
  name: 'callingCard', //页面名称，必填
  props: {},
  components: {},
  data() {
    return {
      info: {
        userId: '',
        avatar: '',
        name: '',
        mobile: '',
        address: '',
        corporation: '',
        position: '',
        introduce: '',
        label: []
      },
      selectTime: [],
      visitPeople: 0,
      visitNum: 0,

      qrCode: '',

      activeName: 'first',

      link:'',

      loading: false,

    }
  },
  watch: {},
  methods: {
    // 跳转名片设置
    setConfig() {
      this.$router.push({
        name: 'CallingCardConfig',
        query: {

        }
      })
    },
    // 生成qrcode
    setQrCode(){
      document.getElementById('qrcode').innerHTML = ''
      this.qrcode = new QRCode(this.$refs.qrcode, {
        width: 140, // 二维码宽度
        height: 140, // 二维码高度
        text: this.link,  // 地址
        background: '#ffffff', // 二维码的后景色
        foreground: '#000000', // 二维码的前景色
        correctLevel: QRCode.CorrectLevel.H,
      })
    },
    // 跳转详情
    toDetail(){
      this.$router.push({
        name: 'CallingCardDetail',
        query: {

        }
      })
    },

    // tab栏点击
    handleTabClick(){

    },

    // 下载二维码
    downloadQrCode(){
      html2canvas(this.$refs.qrcode, {
        useCORS: true, // 支持图片跨域
        backgroundColor: null, // 画出来的图片有白色的边框,不要可设置背景为透明色（null）
      }).then((canvas) => {
        // 将canvas转换成图片的DataURL
        const dataURL = canvas.toDataURL('image/png');
        // 创建一个下载链接
        const link = document.createElement('a');
        link.download = 'qrcode.png'; // 设置下载文件的名称
        link.href = dataURL; // 设置链接的href属性为图片的DataURL
        // 触发这个链接的点击事件，以便开始下载图片
        link.click();
        // 清理DOM，移除下载链接
        link.remove();
      }).catch(() => {
      })
    },

    // 复制链接
    copyLink(){
      navigator.clipboard.writeText(this.link).then(() => {
        this.$message({ message: '复制成功', type: 'success' })
      });
    },

    // 查询
    handleQuery(){
       let obj = {
         startTime: this.selectTime ? this.selectTime[0] : '',
         endTime: this.selectTime ? this.selectTime[1] : '',
       }
       api.getPvAndUv(obj).then(res => {
         this.visitNum = res.data?.pv || 0
         this.visitPeople = res.data?.uv || 0
       })
    },

    // 初始化查询详情
    getDetail(){
      this.loading = true
      api.getCardDetail({userId: getWeUserId()}).then(res => {
        this.info = {
          ...res.data,
          label: res.data?.label ? res.data?.label.split(',') : [],
        }
        this.link = window.globalConfig.SHARE_URL_CALLINGCARD + getWeUserId() + '&cardId=' + this.info?.cardId
        this.setQrCode()
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    }

  },
  mounted() {
    this.getDetail()
    let currentDate = new Date();
    let nowDate = new Date()
    nowDate.setHours(23,59,59,59)
    let endDate = currentDate.toISOString().substring(0, 10)
    currentDate.setHours(0, 0, 0, 0); // 将时间设置为当天的凌晨
    currentDate.setDate(currentDate.getDate() - 6); // 将日期设置为需要的天数
    let startDate = currentDate.toISOString().substring(0, 10); // 将设置的天数作为开始日期
    let datesArray = [startDate, endDate]
    this.selectTime = datesArray
    this.$set(this, 'selectTime', datesArray)
    window.setTimeout(() => {
      this.handleQuery()
    }, 10)
  },
  created() {
  }
}

</script>

<style lang="scss" scoped>
@import "./common";

.app-container {
  height: 100%;
}

.card-header {
  display: flex;
  border-bottom: 1px solid #ccc;
  padding: 12px 28px;
  justify-content: space-between;
  height: 54px;
  line-height: 54px;

  .title {
    font-size: 22px;
    font-weight: 500;
    line-height: 34px;
  }
}

.content {
  display: flex;
  justify-content: center;
  align-items: center;

  .callingCard {
    display: flex;
  }
}

.card {
  width: 360px;
  padding: 12px;
  margin-top: 52px;
  margin-left: -124px;
}

.card-time {
  border: 1px solid #ccc;
  margin-bottom: 12px;
  border-radius: 6px;
}

.card-share {
  border: 1px solid #ccc;
  border-radius: 6px;
}

.card-time{
  padding: 14px;
}

.card-time-select{
  font-weight: 500;
  font-size: 16px;
}

.card-time-result{
  margin: 18px 0 6px;
  font-size: 14px;
  line-height: 24px;
  .result-num{
    color: #082AFF;
    font-weight: 500;
    font-size: 28px;
    margin-left: 4px;
  }
}

.shareToH5{
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.shareInfo{
  font-size: 14px;
  color: #999;
  margin-top: 8px;
}

.shareBtn{
  margin-top: 14px;
  display: flex;
  justify-content: space-between;
  width: 180px;
  color: #082AFF;
  font-size: 14px;
}
</style>
